<template>
  <div class="report">
    <div class="content">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据统计</el-breadcrumb-item>
        <el-breadcrumb-item>数据报表</el-breadcrumb-item>
      </el-breadcrumb>
      <div id="myChart" :style="{width: '800px', height: '500px'}"></div>
    </div>
  </div>
</template>


<script>
const echarts = require("echarts");
import http from "@/api/port";
export default {
  data() {
    return {
      type: 1,
      options: {}
    };
  },
  created() {
    this.reports();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption(this.options, true);
    },
    reports() {
      http(`reports/type/${this.type}`, {}, "get", {}).then(res => {
        this.options = res.data;
        let tooltip = {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        };
        let toolbox = {
          feature: {
            saveAsImage: {}
          }
        };
        this.$set(this.options, "tooltip", tooltip);
        this.$set(this.options, "toolbox", toolbox);
        this.drawLine();
      });
    }
  }
};
</script>


<style scoped lang="scss">
</style>
